<template>
  <div class="component-a">
    <h2>组件A</h2>
    <p>计数器: {{ count }}</p>
    <button @click="increment">增加</button>
    <p>消息: {{ message }}</p>
    <input v-model="newMessage" @change="updateMessage">
  </div>
</template>

<script>
export default {
  name: 'ComponentA',
  data() {
    return {
      newMessage: ''
    }
  },
  computed: {
    count() {
      return this.$store.state.count
    },
    message() {
      return this.$store.state.message
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    updateMessage() {
      this.$store.commit('updateMessage', this.newMessage)
    }
  }
}
</script> 